<!--
 * @Author: wangshuguang
 * @Date: 2022-06-06 14:30:00
 * @LastEditTime: 2022-07-06 16:09:32
 * @LastEditors: wangshuguang
 * @Description: 开通插件
-->
<template>
  <div class="openPlug">
    <HeaderComp :title="`开通${pageTitle}插件`" />
    <div class="plugContent">
      <!-- 开通金额 -->
      <div class="plugIntoItem">
        <div class="title">开通金额</div>
        <ul>
          <li>基础费用：{{ plugDetail.openAmt }}元</li>
          <li v-show="plugDetail.yearAutoPay == 1">有效期：1年</li>
        </ul>
      </div>
      <!-- 插件权益 只有超级会员展示 -->
      <div class="plugIntoItem" v-if="pluginCode == 'supermember'">
        <div class="title">插件权益</div>
        <div class="textInfo">
          <van-checkbox icon-size="15px" :value="true" checked-color="#4AB759">
            成为超级会员核心商家
          </van-checkbox>
          <van-checkbox icon-size="15px" :value="true" checked-color="#4AB759">
            拥有{{ plugDetail.merQuota }}个合作商家名额
          </van-checkbox>
          <van-checkbox icon-size="15px" :value="true" checked-color="#4AB759">
            享受插件交易实付金额的{{ plugDetail.sumBkgeRate }}%返佣
          </van-checkbox>
        </div>
      </div>
      <!-- 特殊费用 -->
      <div class="plugIntoItem special" >
        <div class="title">特殊费用</div>
        <ul class="textInfo">
          <template v-if="pluginCode == 'supermember' && plugDetail.pluginSpecialConfs && plugDetail.pluginSpecialConfs.length">
            <li v-for="(item,index) of plugDetail.pluginSpecialConfs" :key="item.confId+'_'+index">
              <span v-if="item.isAddYear">超过{{ item.merNum }}个合作商户名额，每个名额加收{{ item.addYearAmt }}元</span>
              <span v-else>超过{{ item.merNum }}个合作商户名额,不加收费用</span>
            </li>
          </template>
          <li v-else>无</li>
        </ul>
      </div>
      <!-- 支付方式 没有开户金额时 无需展示 -->
      <div class="plugIntoItem payType" v-show="plugDetail.openAmt">
        <div class="title">支付方式</div>
        <div class="textInfo">
          <van-radio-group v-model="payType">
            <van-radio name="ZFB" checked-color="#FFB72F">支付宝支付</van-radio>
            <van-radio :disabled="!wallNum" name="WALL" checked-color="#FFB72F">钱包余额（剩余￥{{ wallNum }}）</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <!-- 支付按钮 -->
    <div class="btns">
      <!-- <div class="agreement">
        <van-radio-group v-model="agreement">
          <van-radio name="agreement" checked-color="#FFB72F" icon-size="18px">
            同意<span>插件服务协议</span>
          </van-radio>
        </van-radio-group>
      </div> -->
      <div class="submitBtn" @click="submit">
        {{ plugDetail.openAmt ? '开通并支付' : '开通' }}
      </div>
    </div>

    
    <van-dialog 
      className="openPlugPwdDialog"
      v-model="pwdVisible" 
      show-cancel-button 
      :before-close="pwdClose">
      <div class="info">
        <div class="closeIcon"></div>
        <div class="title">请输入支付密码</div>
        <div class="payAmount">￥{{ plugDetail.openAmt }}</div>
        <div class="payTypeLabel">
          <span>支付方式</span>
          <span>钱包余额</span>
        </div>
      </div>
      <van-password-input
        :value="pwd"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
    </van-dialog>
    
    <!-- 数字键盘 -->
    <van-number-keyboard
      z-index="3000"
      v-model="pwd"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { 
  qryMerPluginDetail, 
  buyPlug,
  qryMerWallBalance
} from "@/api/plug";
import { 
  queryEnjoyAccountBalance
} from "@/api/flow/index";
import { payFormSubmit } from "@/utils/utils";
import { mapGetters } from "vuex";
import { plugTitleObj } from "./plugConfig";

export default {
  data(){
    return {
      showKeyboard: false,
      pwdVisible: false,
      pwd: '',
      payType: 'ZFB',
      pageTitle: '',
      pluginCode: '',
      plugDetail: {},
      wallNum: 0,
      agreement: true,
    }
  },
  mounted(){
    console.log('route supermember',this.$route)
    const { pluginCode } = this.$route.query
    this.pluginCode = pluginCode
    this.pageTitle = plugTitleObj[pluginCode] || ''
    this.pageInit()
  },
  computed:{
    ...mapGetters(['businessId','flowQueryData'])
  },
  methods: {
    submit(){
      if (!this.agreement) {
        this.$toast('请先同意营销插件协议')
        return
      } else if (this.plugDetail.openAmt) {
        // 需要支付金额
        if (this.payType == 'ZFB') {
          // 支付宝支付
          this.zfbPay()
        } else {
          // 余额支付
          this.pwdVisible = true
        }
      } else {
        // 不需要支付金额  直接调用接口
        this.wallPay()
      }
    },
    zfbPay() {
      // 支付宝支付
      buyPlug({
        pluginCode: this.plugDetail.pluginCode,
        payAmt: this.plugDetail.openAmt,
        routing: 'plugPayResult?plugType=1',
        quitRouting: 'plugPayResult?payType=ZFBERR',
        type: 1,
        payType: 'alipay',
        payMode: 'H5',
        subject: '商户开通插件'
      }).then(res => {
        console.log('res', res)
        const { aliFrom } = res.data.data
        payFormSubmit(aliFrom)
      })
    },
    pwdClose(type,done){
      if(type == 'confirm'){
        console.log('type,done',type)
        this.wallPay('wallet', done)
      }else{
        this.pwd = ''
        done()
      }
    },
    wallPay(payType, done) {
      // 余额支付
      buyPlug({
        pluginCode: this.plugDetail.pluginCode,
        payAmt: payType ? this.plugDetail.openAmt : 0,
        payPassword: this.pwd || '',
        type: 1,
        payMode: 'H5',
        payType: payType || '',
        subject: '商户开通插件'
      }).then(res => {
        console.log('res',res)
        const { code, msg, data } = res.data
        if(code == 0){
          this.$router.push({
            path:'/plugPayResult',
            query: {
              ...data,
              payType: 'WALL'
            }
          })
        }else{
          this.$toast(msg)
          if(done) done(false)
        }
        // this.payResult = { ...res.data }
      })
    },
    pageInit(){
      const { merchantId,deptId, } = this.flowQueryData

      qryMerPluginDetail({
        businessId: this.businessId,
        code: this.pluginCode
      }).then(res => {
        this.plugDetail = {
          ...res.data.data
        }
        console.log('plugDetail', this.plugDetail)
      })
      
      // 获取余额
      qryMerWallBalance().then(res => {
        this.wallNum = res.data.data || 0
      })
    }
  }
}
</script>

<style  lang="less" scoped>
.openPlugPwdDialog{
  top: 30%;
  .info{
    padding: 20px;
    .title{
      font-size: 32px;
      color: #131313;
      text-align: center;
    }
    .payAmount{
      font-size: 60px;
      color: #131313;
      text-align: center;
      margin-bottom: 67px;
    }
    .payTypeLabel{
      display: flex;
      justify-content: space-between;
      color: #131313;
      opacity: 0.7;
      margin-bottom: 60px;
    }
  }
}
.openPlug{
  height: 100%;
  .plugContent{
    padding: 37px;
    .plugIntoItem{
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      &.special{
        .textInfo{
          color: #131313;
          opacity: 0.6;
          font-size: 28px;
          div{
            margin-bottom: 10px;
          }
        }
      }
      &.payType{
        .textInfo{
          color: #131313;
          font-size: 28px;
          font-weight: bold;
          .van-radio{
            margin-bottom: 27px;
          }
        }
      }
      .title{
        color: #131313;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 30px;
      }
      .textInfo{
        .van-checkbox{
          margin-bottom: 21px;
          font-size: 28px;
          color: #131313;
        }
      }
      ul{
        color: #131313;
        opacity: 0.6;
        font-size: 28px;
        padding-left: 30px;
        li{
          list-style: disc;
          margin-bottom: 20px;
        }
      }
    }
  }
  .btns{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .agreement{
      margin-bottom: 40px;
      font-size: 26px;
      display: flex;
      justify-content: center;
    }
    .submitBtn{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 98px;
      color: #fff;
      font-size: 32px;
      background: #FFB72F;
    }
  }
}
</style>